import { delay } from "@pureadmin/utils";
import { ref, onMounted, reactive  } from "vue";
import type { PaginationProps } from "@pureadmin/table";
import Empty from "./empty.svg?component";

export function useColumns() {
  const loading = ref(true);

  const columns: TableColumnList = [
    {
      label: "项目名称",
      prop: "projectName",
      formatter:(row: any)=> {
        return row.projectName + ' (' + row.projectNo + ')';
      },
    },
    {
      label: "项目类型",
      prop: "projectTypeName",
    },
    // {
    //   label: "执行阶段",
    //   prop: "taskTypeName",
    //   formatter:(row: any)=> {
    //     return row.taskTypeName || '--'
    //   },
    //   width: 160
    // },
    {
      label: "是否逾期",
      prop: "isPrivate",
      formatter:(row: any)=> {
        return row.isPrivate === 0?'否':'是'
      },
    },
    {
      label: "剩余时间(天)",
      prop: "remaining",
      formatter:(row: any)=> {
        return row.remaining > 0?row.remaining:0
      },
    },
    {
      label: "逾期时间(天)",
      prop: "actualHours",
      formatter:(row: any)=> {
        return row.remaining <= 0?row.remaining*-1:0
      },
    },
  ];

  /** 分页配置 */
  const pagination = reactive<PaginationProps>({
    pageSize: 10,
    currentPage: 1,
    layout: "prev, pager, next",
    total: 0,
    align: "center"
  });

  function onCurrentChange(page: number) {
    console.log("onCurrentChange", page);
    loading.value = true;
    delay(300).then(() => {
      loading.value = false;
    });
  }
  onMounted(() => {
    loading.value = false;
  });

  return {
    Empty,
    loading,
    columns,
    pagination,
    onCurrentChange
  };
}
